<template>
    <div>
        <el-form ref="rulePermissionSearchFormRef" :model="PermissionSearchForm" status-icon :rules="rules"
            class="demo-ruleForm">
            <div class="searchBox">
                <el-form-item prop="systemname">
                    <el-input v-model="PermissionSearchForm.systemname" autocomplete="off" placeholder="请输入职位名称" />
                </el-form-item>
                <!-- 选择状态 -->
                <el-form-item prop="systemstate">
                    <el-select v-model="PermissionSearchForm.systemstate" placeholder="请选择状态">
                        <el-option label="开启" value=true />
                        <el-option label="关闭" value=fasle />
                    </el-select>
                </el-form-item>
            </div>


            <!-- 查询 重置 -->
            <el-form-item class="itemButton">
                <el-button type="primary" @click="submitPermissionSearchForm">查询</el-button>
                <el-button @click="resetPermissionSearchForm">重置</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>
  
<script lang="ts" setup>
import { reactive, ref, defineProps } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
import noEmptySearchObject from '@/utils/Tools/JudgmentObject'
import { useRoute, useRouter } from 'vue-router'
//表单
const rulePermissionSearchFormRef = ref<FormInstance>()
const route = useRoute()
const router = useRouter()
interface IPermissionSearch {
    systemname: string
    systemstate: boolean | string
}
const PermissionSearchForm = reactive<IPermissionSearch>({
    systemname: '',
    systemstate: "",
})

//查询操作
//props数据
interface IProps {
    pageSize: number
    page: number
    loadData: (page?: number, pageSize?: number, query?: object) => void
}
const props = defineProps<IProps>()
const submitPermissionSearchForm = () => {
    let query = noEmptySearchObject(PermissionSearchForm)
    let querqData = {} as any
    if (query !== null) {
        querqData = query
    }
    props.loadData(props.page, props.pageSize, querqData)
    router.replace({ query: { ...querqData, page: props.page, pageSize: props.pageSize } })
}

const resetPermissionSearchForm = () => {
    if (!rulePermissionSearchFormRef.value) return
    rulePermissionSearchFormRef.value.resetFields()
}
const rules = reactive<FormRules<IPermissionSearch>>({
    systemname: [{ whitespace: true, message: '客户名称不能为空', trigger: 'blur' }],
    systemstate: [{ whitespace: true, message: '客户联系人不能为空', trigger: 'blur' }],
})
</script>
  

<style lang="scss" scoped>
.el-form {
    height: 60px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .searchBox {
        width: 50%;
        display: flex;
        justify-content: flex-start;
        align-items: center;


        .el-form-item {


            .el-input,
            .el-select {
                width: 150px;
            }

            margin-bottom: 0px;
            margin: 0 5px;
        }
    }

    .itemButton {
        width: 150px;
        height: 60px;
        display: flex;
        justify-content: space-around;
        align-items: center;
        margin-bottom: 18px;
        margin-top: 20px;

        .el-button {
            height: 30px;
        }
    }
}

.el-form .searchBox .el-form-item:first-child {
    margin-left: 25px;
}
</style>